<template>
  <view style="padding: 0 50rpx;">
    <!-- 占位栏，模拟出标题状态栏高度 -->
    <uni-nav-bar backgroundColor="#fafafa" :fixed="true" :statusBar="true" :border="false"></uni-nav-bar>

    <!-- 左上角叉叉图标 -->
    <image class="back-icon" src="../../static/loginView/back.png" @click="backPage"></image>

    <!-- 标题 -->
    <view class="title">密码登录</view>

    <!-- 输入您的学号/手机号 -->
    <view class="input-wrapper">
      <input class="input-style" confirm-type="next" type="number" placeholder="输入您的学号/手机号"
        v-model="studentIdOrPhoneNumber" :auto-focus="true" placeholder-style="color:#bbb">
      <uni-icons class="input-right-clearAnForgetPassword" custom-prefix="iconfont" type="clear" color="#bbb" size="22"
        v-if="studentIdOrPhoneNumber.length>0" @click="studentIdOrPhoneNumber=''"></uni-icons>
    </view>

    <!-- 输入您的密码 -->
    <view class="input-wrapper">
      <input class="input-style" confirm-type="go" @confirm="login" type="text" placeholder="输入您的密码" v-model="password"
        placeholder-style="color:#bbb">
      <view class="input-right-clearAnForgetPassword">
        <uni-icons custom-prefix="iconfont" type="clear" color="#bbb" size="22" v-if="password.length>0"
          @click="password=''"></uni-icons>
        <text class="forgetPassword" @click="forgetPassword">忘记密码？</text>
      </view>
    </view>

    <!-- 提示用户名或密码错误 -->
    <view class="error-writing" :style="errorWriting ? '' : 'text-indent:-1000px;'">
      <text v-if="errorWritingCount < 10">用户名密码错误</text>
      <text v-else>当前网络环境异常，请稍后再试</text>
    </view>

    <!-- 登录/注册 -->
    <view class="loginAndRegister-button-box">
      <button class="login-button" @click="login">登录</button>
      <button class="register-button" @click="toRegisterPage">没有账号？去注册</button>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        studentIdOrPhoneNumber: '',
        password: '',
        errorWriting: false,
        errorWritingCount: 0
      };
    },
    methods: {
      // 返回上一个页面
      backPage() {
        uni.navigateBack({
          delta: 1
        })
      },
      // 登录
      async login() {
        uni.showLoading({
          title: '正在登录中...',
          mask: false
        });

        await this.$http.user.login(this.studentIdOrPhoneNumber, this.password).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 200) {
            uni.setStorageSync('token', res.token)

            //携带返回消息体 - 刷新 首页和个人中心 的消息中心数据使用
            uni.setStorageSync('isLoginViewToIndex', true)
            uni.setStorageSync('isLoginViewToMyCenter', true)

            // 延迟 0.5 秒跳转
            setTimeout(() => {
              uni.navigateBack()
            }, 500)
          } else if (res.code == 401) {
            this.errorWriting = true
            this.errorWritingCount++
          } else if (!res.code) {
            return uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
          }

          uni.showToast({
            title: res.msg,
            icon: 'none',
            position: 'center'
          });
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        uni.hideLoading()
      },
      // 注册
      toRegisterPage() {
        uni.navigateTo({
          url: `../registerView/registerView`
        })
      },
      // 忘记密码
      forgetPassword() {
        // 跳转到忘记密码页面
        uni.navigateTo({
          url: '/pages/forgetPassword/forgetPassword'
        })
      }
    }
  }
</script>

<style lang="scss">
  // 左上角叉叉图标
  .back-icon {
    width: 80rpx;
    height: 80rpx;
  }

  // 标题
  .title {
    font-size: 30px;
    margin-top: 70rpx;
  }

  // 输入您的学号/手机号
  // 输入您的密码
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 100rpx;

    & .input-style {
      border-bottom: 1px solid #bbb;
      font-size: 28px;
      padding: 10rpx 0;
    }

    // 忘记密码
    & .input-right-clearAnForgetPassword {
      display: flex;
      align-items: center;
      position: absolute;
      right: 8rpx;

      & .forgetPassword {
        margin-left: 20rpx;
        font-size: 15px;
        color: #999;
      }
    }
  }

  // 提示用户名或密码错误
  .error-writing {
    text-align: center;
    color: red;
    margin: 35rpx 0;
  }

  // 登录/注册
  .loginAndRegister-button-box {
    display: flex;
    flex-direction: column;

    & .login-button {
      color: #fff;
      width: 100%;
      background: #000;
      margin-bottom: 40rpx;
    }

    & .register-button {
      color: #fff;
      width: 100%;
      background: #ccc;
    }
  }
</style>
